<template>
  <button
    @click="triggerClick"
    :style="{'font-size': sizeList[size], 'border-radius': $attrs.round !== undefined ? '1.43em' : '4px'}"
    :class="[`el-button el-button__default`, {[`el-button__${type}`]: type}]">
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "el-button",
  props: {
    type: {
      type: String,
      validator(value) {
        return ['primary', 'success', 'info', 'warning', 'danger', 'default'].indexOf(value) > -1;
      }
    },
    size: {
      type: String,
      validator(value) {
        return ['mini', 'small', 'middle'].indexOf(value) > -1;
      }
    }
  },
  methods: {
    triggerClick() {
      this.$emit('click');
    }
  },
  data() {
    return {
      sizeList: {
        mini: '10px',
        small: '16px',
        middle: '20px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  $primary: #409EFF;
  $warning: #E6A23C;
  $danger: #F56C6C;
  $info: #909399;
  $success: #67C23A;
  $ratio: 1.08;
  .el-button{
    overflow: hidden;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    text-align: center;
    line-height: 2.86;
    padding: 0 1.5em;
    user-select: none;
  }
  .el-button__default{
    color: #606266;
    border: 1px solid #dcdfe6;
    font-size: 14px;
    background: #fff;
    &:hover{
      background: #ecf5ff;
      color: $primary;
      border-color: #b3d8ff;
    }
    &:active{
      border-color: $primary;
    }
  }
  .el-button__primary{
    color: #fff;
    border: 1px solid $primary/$ratio;
    font-size: 14px;
    background: $primary;
    &:hover{
      background: $primary*$ratio;
      color: #fff;
      border: 1px solid $primary/$ratio;
    }
    &:active{
      background: $primary/$ratio;
    }
  }
  .el-button__warning{
    color: #fff;
    border: 1px solid $warning/$ratio;
    font-size: 14px;
    background: $warning;
    &:hover{
      background: $warning*$ratio;
      color: #fff;
      border: 1px solid $warning/$ratio;
    }
    &:active{
      background: $warning/$ratio;
    }
  }
  .el-button__danger{
    color: #fff;
    border: 1px solid $danger/$ratio;
    font-size: 14px;
    background: $danger;
    &:hover{
      background: $danger*$ratio;
      color: #fff;
      border: 1px solid $danger/$ratio;
    }
    &:active{
      background: $danger/$ratio;
    }
  }
  .el-button__info{
    color: #fff;
    border: 1px solid $info/$ratio;
    font-size: 14px;
    background: $info;
    &:hover{
      background: $info*$ratio;
      color: #fff;
      border: 1px solid $info/$ratio;
    }
    &:active{
      background: $info/$ratio;
    }
  }
  .el-button__success{
    color: #fff;
    border: 1px solid $success/$ratio;
    font-size: 14px;
    background: $success;
    &:hover{
      background: $success*$ratio;
      color: #fff;
      border: 1px solid $success/$ratio;
    }
    &:active{
      background: $success/$ratio;
    }
  }
</style>
